import React, { useEffect, useState } from 'react'
import { Button } from '@material-ui/core'
import './sq.less'
import SQGridList from '@/components/SQGridList'
import { getSelectQuestionApi } from '@/Api'
import { useHistory } from 'react-router'
import GoBack from '@/components/SQGridList/GoBack'
const cateEnum = {
    'all': '全部',
    'qa': '问答',
    'fill': '填空',
    'one': '单选',
    'many': '多选',
    'code': '编程',
    'check': '判断',
}
export default function SelectQuestion(props) {
    const history = useHistory()
    // 试题分类
    const testTypeList = [
        { key: 'all', zh: "全部", value: "" },
        { key: 'err', zh: "错误", value: "" },
        { key: 'done', zh: "已做", value: "" },
        { key: 'notdone', zh: "未做", value: "" },
    ]
    // 题目分类
    const [questionTypeList, setQuestionTypeList] = useState([])
    useEffect(() => {
        getSelectQuestionApi({
            actionCode: props.match.params.actionCode,
            testType: 'all'
        }).then(res => {
            const { data } = res
            data.forEach(el => {
                el.zh = cateEnum[el.key]
            });
            setQuestionTypeList(data)
        }).catch(err => {
            console.log(err);
        })
    }, [])
    // 做题数量
    const testNumList = [
        { key: 5, zh: "5", value: "" },
        { key: 10, zh: "10", value: "" },
        { key: 20, zh: "20", value: "" },
        { key: 30, zh: "30", value: "" },
        { key: 50, zh: "50", value: "" },
        { key: 100, zh: "100", value: "" },
    ]
    // 修改一个要获取的试题类型
    const [testType, setTestType] = useState('all')
    // 修改一下要获取的题目的类型
    const [questionType, setQuestionType] = useState('all')
    const [testNum, setTestNum] = useState(5)

    const gotoPractice = () => {
        history.push({
            pathname: '/practice',
            state: {
                testType,
                questionType,
                testNum,
                actionCode: props.match.params.actionCode,
                liIndex: 0
            }
        })
        localStorage.setItem('state', JSON.stringify({
            testType,
            questionType,
            testNum,
            actionCode: props.match.params.actionCode
        }))
    }

    return (
        <div className="sq">
            <div className="top-btns flex">
                <Button variant="contained" color="primary" onClick={gotoPractice}>进入练习模式</Button>
                <Button className="exam" variant="contained" >进入考试模式</Button>
            </div>
            {/* 试题分类 */}
            <SQGridList title="试题分类" data={testTypeList} onItemChange={(key) => setTestType(key)}></SQGridList>
            <SQGridList title="题目分类" data={questionTypeList} onItemChange={(key) => setQuestionType(key)}></SQGridList>
            <SQGridList title="做题数量" data={testNumList} onItemChange={(key) => setTestNum(key)}></SQGridList>
            <GoBack></GoBack>
        </div>
    )
}
